<template>
  <div class="view-createXZ">
    <van-nav-bar title="发布闲置" left-arrow @click-left="$router.go(-1)" />
    <van-cell-group>
      <van-field v-model="xzInfo.title" placeholder="标题" />
      <van-field v-model="xzInfo.price" placeholder="价格" />
      <van-field v-model="xzInfo.desc" placeholder="描述" />
      <van-field v-model="xzInfo.newOld" placeholder="新旧程度" />
      <van-field v-model="xzInfo.city" placeholder="城市" />
    </van-cell-group>
    <div class="uploaderWrapper">
      <van-uploader v-model="fileList" multiple />
    </div>
    <van-field readonly clickable label="选择分类" :value="value" @click="showPicker = true" />

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <div class="button-wrapper">
      <van-button type="primary" @click="handleSubmit">提交</van-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
  NavBar,
  Button,
  CellGroup,
  Field,
  Uploader,
  Picker,
  Popup,
  Toast
} from "vant";
Vue.use(NavBar)
  .use(Button)
  .use(CellGroup)
  .use(Field)
  .use(Uploader)
  .use(Picker)
  .use(Popup)
  .use(Toast);
import xzProductApi from "../../api/xzProduct";
export default {
  data() {
    return {
      xzInfo: {},
      fileList: [],
      columns: ["运动户外", "家用电器", "生鲜"],
      showPicker: false,
      value: ""
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },

    postXzProduct(data) {
      xzProductApi.createXZ(data).then(() => {
        this.$toast("保存成功!");
      });
    },

    async handleSubmit() {
      let submitData = this.xzInfo;
      await this.postXzProduct(submitData);
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.uploaderWrapper {
  margin: 10px;
  text-align: left;
}

.button-wrapper {
  position: fixed;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  .van-button.van-button--primary.van-button--normal {
    width: 100%;
  }
}
</style>
